<template>
  <yd-ls-layout :title="title" :onfoot=false :tolfurl="urls">
    <div class="yd-ls-height"></div>
    <yd-list class="yd-ls-billpic-list" theme="4">
      <a class="yd-list-item" v-for="(items,index) in turnDetail" :key="index">
        <yd-icon size=".4rem" color="#FF685D" name="shanchu" @click.native="delTurn(items.id)" v-if="items.isFail" custom></yd-icon>
        <div class="yd-list-img">
          <yd-lightbox>
            <yd-lightbox-img :src="items.url"></yd-lightbox-img>
          </yd-lightbox>
        </div>
        <div class="yd-list-mes" v-if="!items.isFail">
          <div class="yd-list-other">
            <div><span></span></div>
            <div><span>转换中</span></div>
          </div>
        </div>
        <div class="yd-list-mes" v-if="items.isFail">
          <div class="yd-list-other">
            <div @click="addPic(items.id)"><span>点击此处重新上传图片</span></div>
            <div>
              <span style="color: #FF685D">不通过</span>
              <yd-icon size=".4rem" color="#FF685D" name="warn" @click.native="openAlert(items.remark)"></yd-icon>
            </div>
          </div>
        </div>
      </a>
    </yd-list>
    <yd-ls-default v-if="!turnDetail"></yd-ls-default>
  </yd-ls-layout>
</template>

<script>
  import ydLsLayout from '../../components/yd-ls-layout.vue'
  import ydLsContent from '../../components/yd-ls-content.vue'
  import ydLsDefault from '../../components/yd-ls-default.vue'
  import ydLsButton from '../../components/yd-ls-button.vue'
  import wx from 'wx'
  import api from '../../axios/api'

  export default {
    name: 'billpic',
    props: {},
    data() {
      return {
        urls: '',
        picItems: [], // 图片数组
        serverId: '', // 上传图片返回的serverId
        serverIds: [], // 存储多图的serverId
        title: '',
        turnDetail: []
      }
    },
    created() {
      this.title = sessionStorage.dates
      sessionStorage.isbillpic = 2
      this.$dialog.loading.open(api.default_loading_txt);
      //TODO:微信图片上传--页面验证
      const getWxValid = ()=>{
        this.axios({
          method:'get',
          url:api.wx_valid,
          params:{
            pageurl: window.location.href
          }
        }).then(function(rsp) {
            wxconfig(rsp.data)
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      }
      const wxconfig = (datas)=>{
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: datas.appId, // 必填，公众号的唯一标识
          nonceStr: datas.nonceStr, // 必填，生成签名的随机串
          timestamp: datas.timestamp, // 必填，生成签名的时间戳
          signature: datas.signature, // 必填，签名，见附录1
          jsApiList: [
            'checkJsApi',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'translateVoice'
          ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
      }
      wx.hideMenuItems({
        menuList: ["menuItem:share:appMessage","menuItem:share:timeline","menuItem:share:qq","menuItem:share:weiboApp","menuItem:share:facebook","menuItem:share:QZone","menuItem:copyUrl","menuItem:originPage","menuItem:openWithQQBrowser","menuItem:openWithSafari"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
      });

      getWxValid()

      //TODO:初始化数据
      let dates = sessionStorage.dates
      this.getTurnDetail(dates)
      this.toBack()
    },
    methods: {
      init() {
      },
      toBack() {
        this.$nextTick(()=>{
          setTimeout(()=>{
            let psize = (sessionStorage.turnindex * 1) * (sessionStorage.turnsize * 1)
            this.urls = `index.html#/bill?turnsize=${psize}`
          },100)
        })
      },
      getTurnDetail(dates) {
        this.axios.get(api.bill_turn_detail, {params:{date:dates}})
          .then(m=>{
            let bill_turn_detail_data = m.data
            this.turnDetail = bill_turn_detail_data.data
            this.$dialog.loading.close()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      openAlert(con) {
        this.$dialog.alert({mes: con});
      },
      addPic(id) {
        let _this = this
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function(res) {
            let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            _this.upload(id, localIds)
          },
          fail: function (res) {
            _this.$dialog.alert({mes: JSON.stringify(res)});
          }
        });

      },
      upload(id, localId) {
        let _this = this
        wx.uploadImage({
          localId: localId.toString(),
          isShowProgressTips: 1,
          success: function (res) {
            _this.refrshPic(id, res.serverId)
          },
          fail: function (res) {
            _this.$dialog.alert({mes:JSON.stringify(res)})
          }
        });
      },
      refrshPic(id,sID){
        let _this = this
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.put(api.bill_turn_upload+'/'+id+'/'+sID, {})
          .then(m=>{
            this.$dialog.alert({
              mes: m.data.retmsg,
              callback:()=>{
                let dates = sessionStorage.dates
                _this.getTurnDetail(dates)
              }
            })
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      delTurn(index) {
        let _this = this
        let params = {id: index}
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.post(api.bill_turn_del, params)
          .then(m=>{
            this.$dialog.alert({
              mes: '删除成功',
              callback:()=>{
                let dates = sessionStorage.dates
                _this.getTurnDetail(dates)
              }
            })
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: '删除失败'})
          })
      }
    },
    mounted() {
      this.init()

    },
    components: { ydLsLayout, ydLsContent, ydLsDefault, ydLsButton }


  }
</script>

<style>

  .yd-ls-billpic-list .yd-list-item {
    padding: 0;
    align-items: center;
    -webkit-align-items: center;
  }
  .yd-ls-billpic-list .yd-list-item .yd-list-img {
    width: 1.5rem;
  }
  .yd-ls-billpic-list .yd-list-item .yd-list-img div {
    height: 1.5rem;
    text-align: center;
  }
  .yd-ls-billpic-list .yd-list-item .yd-list-img img {
    display: inline-block;
    width: inherit;
    height: 100%;
  }
  .yd-ls-billpic-list .yd-list-item .icon-custom-shanchu {
    margin: 0 .2rem
  }
</style>
